import withHeaderContextMenu, { ContextMenuKey, CustomColumnType } from '@/pages/components/hoc/withHeaderContextMenu';
import { message, Table, type MenuProps } from 'antd';
import React, { useState } from 'react'

// 使用示例
interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    email: string;
}

export default function UserList() {

    const [newCols, setNewCols] = useState([] as CustomColumnType<DataType>[])

    const columns: CustomColumnType<DataType>[] = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            width: 120,
            customData: { description: '用户姓名' }
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
            width: 80,
            sorter: (a, b) => a.age - b.age,
        },
        {
            title: '地址',
            dataIndex: 'address',
            key: 'address',
            width: 200,
        },
        {
            title: '邮箱',
            dataIndex: 'email',
            key: 'email',
            width: 180,
        },
    ];

    const data: DataType[] = [
        { key: '1', name: '张三', age: 32, address: '上海市', email: 'zhangsan@example.com' },
        { key: '2', name: '李四', age: 42, address: '北京市', email: 'lisi@example.com' },
        { key: '3', name: '王五', age: 28, address: '广州市', email: 'wangwu@example.com' },
    ];

    // 创建增强后的 Table 组件
    const TableWithContextMenu = withHeaderContextMenu<DataType>({
        onMenuClick: (key, column) => {
            if(key === 'export-data') {
                message.success('导出成功')
            }
        },
        getNewCols: (newCols) => {
            console.log('New columns:', newCols);
            setNewCols(newCols)
        },
    })(Table);

    return (
        <div>
            <h2>带右键菜单和列排序功能的 Ant Design Table</h2>
            <TableWithContextMenu
                columns={newCols.length !== 0 ? newCols : columns}
                dataSource={data}
                bordered
                scroll={{ x: 'max-content' }}
                rowKey="key"
            />
        </div>
    )
}
